<template>
  <div class="discuss">
    <div id="pinglun">
      <textarea name id="ping" placeholder="快来说说吧！" v-model="distext"></textarea>
      <br />
      <!-- <input type="button" value="发表评论" id="publish" @click="dispub" /> -->
      <el-button :plain="true" id="publish" @click="dispub">发表评论</el-button>
    </div>

    <el-divider content-position="left">
      <h4>评论:</h4>
    </el-divider>
    <div v-for="discuss in discusses" :key="discuss.menuId">
      <img :src="'/api/upload/' + discuss.userImg" />
      {{ discuss.userName }}
      <p>{{ discuss.discussContent }}</p>
      <span class="span1">{{ formateDate(discuss.discussTime) }}</span>
      <hr />
    </div>
  </div>
</template>

<script>
import moment from "moment"; //导入文件
export default {
  data() {
    return {
      distext: "",
      queryId: -1,
      discusses: [],
      getUserInfo: [],
      user: 0,
      newTime: new Date()
    };
  },

  created() {
    //========获取登录信息===========
    this.$axios.defaults.headers.common["Authorization"] = localStorage.getItem(
      "MyToken"
    );
    this.$axios
      .get("/api/users/getUserInfo")
      .then(res => {
        console.log("res:", res);
        this.getUserInfo = res.data.data;
        this.user = res.data.data[0].userId;
      })
      .catch(err => {
        console.log("err:", err);
      });
    //========获取评论内容===========
    this.queryId = this.$route.params.id;
    this.$axios
      .get("/api/createMenu/getdiscuss", { params: { menuId: this.queryId } })
      .then(res => {
        console.log("res:", res);
        this.discusses = res.data.data;
      })
      .catch(err => {
        console.log("err:", err);
      });
  },

  methods: {
    //=============发表评论=================
    dispub() {
      if (this.distext != "" && this.getUserInfo.length != 0) {
        this.queryId = this.$route.params.id;
        this.$axios
          .get("/api/createMenu/getpushdis", {
            params: {
              distext: this.distext,
              getId: this.queryId,
              userId: this.user
            }
          })
          .then(res => {
            console.log(res);
            this.discusses.unshift({
              userImg: this.getUserInfo[0].userImg,
              userName: this.getUserInfo[0].userName,
              discussContent: this.distext,
              discussTime: this.newTime
            });
            this.distext = "";
          })
          .catch(err => {
            console.log("err:", err);
          });
      } else if (this.getUserInfo.length == 0) {
        this.$message({
          message: "请登录！"
        });
      } else {
        alert("内容不能为空！");
      }
    },
    //获取当前时间（格式）
    formateDate1(nowTime) {
      var moment = require("moment");
      return moment(nowTime).format("YYYY-MM-DD");
    },
    // 时间格式转换
    formateDate: function(datetime) {
      function addDateZero(num) {
        return num < 10 ? "0" + num : num;
      }
      let d = new Date(datetime);
      let formatdatetime =
        d.getFullYear() +
        "-" +
        addDateZero(d.getMonth() + 1) +
        "-" +
        addDateZero(d.getDate()) +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();
      return formatdatetime;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../css/menu/menuchild.css";
</style>